/*
@anthor:lishijie@nle-tech.com
**/
*{
    font-family: "MicrosoftYaHei-Bold"
}

* img{
    max-width: 100%;
    height: auto;
}
.page1{
    background-image: url("../images/bg1.jpg");
    background-size: cover;
    color:#585A57;
    font-weight: bolder;
    font-size: 16px;
}
.page1::after{
    /*铺上一层白色半透明*/
     content: " "; 
    display: block;
     position: absolute; 
    background-color: rgba(255,255,255,0.5);
    width:100%;
    height:100vh;
    top:0;
    left: 0;
    z-index: 0;
}   

.page1 div.desc{
      position: relative;  
     z-index: 10; 
}

@media (min-width:768px){
    .page1 .main .row:first-child{
        background: none;
    }
}
/*B&D post的LOGO和介绍之间插入一个分隔用的白色细线*/
@media (min-width:992px){
    .page1  .main  .row:first-child{
        background-image: -webkit-linear-gradient(left, transparent 0%, transparent 5px, rgba(255,255,255,0.25) 5px, rgba(255,255,255,0.25) 6px, transparent 6px),url("../images/logo.png");
        background-image: -moz-linear-gradient(left, transparent 0%, transparent 5px, rgba(255,255,255,0.25) 5px, rgba(255,255,255,0.25) 6px, transparent 6px),url("../images/logo.png");
        background-image: -o-linear-gradient(left, transparent 0%, transparent 5px, rgba(255,255,255,0.25) 5px, rgba(255,255,255,0.25) 6px, transparent 6px),url("../images/logo.png");
        background-image: linear-gradient(to right, transparent 0%, transparent 5px, rgba(255,255,255,0.25) 5px, rgba(255,255,255,0.25) 6px, transparent 6px),url("../images/logo.png");
        background-size: 11px 280px,30% auto;
        background-repeat: no-repeat;
        background-position: 50% 50%,25% 50%;
        }
}


/*  .page1 .container .row:first-child::before{

    content: " ";
    position: absolute;
    background-color: #ffffff;
    height: 250px;
    width: 2px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}  */

.page1  .main  img.logo{
    width: 200px;
}
@media  (min-width:768px){
    .page1  .main   img.logo{
        visibility: visible;
    }
} 
@media  (min-width:992px){
    .page1  .main  img.logo{
        visibility: hidden;
    }
}
.page1  .main  h1{
    color:#fece00;
    font-size:48px;
    font-weight: bolder;
    padding-left: 10px;
    margin-top: 0;
}
@media (max-width:375px){
    .page1  .main  h1{
        font-size: 30px;
        font-size:10vw;
    }
}
.page1  .main  i.color-block{
    background-color: #FECE00;
    color: transparent;
    transform: scaleX(1.1);
    display: inline-block;
    margin-left: 3px;
    width: 9px;
}
.page1  .main  .row>div{
    margin: 10px auto;
}
.page1  .main   p.about{
    padding-right: 45px;
    padding-left: 10px;
}
.page1  .main  .row:nth-child(2){
    background-color: rgba(0,0,0,0);
    margin-top: 100px;
}
@media (min-width:992px){
    .page1  .main  .row:nth-child(2)>div:nth-child(1){
        text-align: right;
    }
    .page1  .main  .row:nth-child(2)>div:nth-child(2){
        text-align: left;
    }
}

@media (max-width:992px){
    .page1  .main  .row:nth-child(2)>div{
        text-align: center;
    }
}
.page1  .main  button{
    width: 308px;
    height: 80px;
    background-color: rgba(0,0,0,0.5);
    font-size: 30px;
    border:1px #FECE00 solid;
    border-radius: 5px;
}
@media (max-width:375px){
    .page1  .main  button{
        font-size: 10vw;
        max-width: 100%;
    }
    .page1  .main  .row:nth-child(2){
        margin-top: 0;
    }
}
.page1  .main  button.order-online{
    background-color: #FECE00;
    color:white;
}
.page1  .main  button.logistics-query{
    background-color:rgba(255,255,255,0.5);
    color:#FECE00;
}
.page1 .track div.col-for-logo{
    padding-bottom: 25px;
}
.page1 .track div.col-for-input{
    padding: 0;
}
.page1 .track div.col-for-button{
    padding: 0;
}
.page1 .track input{
    height: 45px;
    border: 1px solid #fece00;
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 23px;
    border-top-left-radius: 23px;
    width: 100%;
    padding-left: 23px;
    color:white;
    font-weight: 100;
}
.page1 .track input::-webkit-input-placeholder{
    color:rgba(238, 238, 238, 0.79);
    /*placeholder的颜色  */
}
.page1 .track button{
    height: 45px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #fece00;
    background-color:#fece00;
    border-bottom-right-radius: 23px;
    border-top-right-radius: 23px;
    background-image: url("../images/search.png");
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
}
.page1 .col-for-tracks{
    padding-top: 15px;
    padding-left: 0;
    padding-right: 0;
}
.page1 .col-for-tracks .tracks{
    background-color: white;
    /* padding: 5px; */
}
.page1 .col-for-tracks .tracks .title{
    border-bottom: 1px solid #a8b7bf;
    padding: 4px;
}
.page1 .col-for-tracks .tracks h1{
    font-size: 12px;
    font-weight: 100;
    color: #FECE00;
    margin: 5px;
}
.page1 .col-for-tracks .tracks .details{
    height: 300px;
    border-bottom: 1px solid #a8b7bf;
    overflow-y:auto;
    font-size: 14px;
    font-weight: 100;
    padding-left: 9px;
}
.page1 .col-for-tracks .tracks .details .tb-row{
    display: table-row;
}
.page1 .col-for-tracks .tracks .details .tb-row:first-child{
    color:#D99161;
}
.page1 .col-for-tracks .tracks .details .tb-row .tb-meteor{
    display: table-cell;
    width: 20px;
    background-image: url("../images/circle.png"),
    linear-gradient(90deg, transparent 0%, transparent 50%, #a8b7bf calc(50% + 1px), transparent 51%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%,100%;
}
.page1 .col-for-tracks .tracks .details .tb-row:first-child .tb-meteor{
     background-image: url("../images/circle-active.png"),
     linear-gradient(90deg, transparent 0%, transparent 50%, #a8b7bf calc(50% + 1px), transparent 51%);
     background-size: 70%,100% 50%; 
     background-position: center,0 100%;
}

.page1 .col-for-tracks .tracks  .details .tb-row:last-child .tb-meteor{
    background-image: url("../images/circle.png"),
     linear-gradient(90deg, transparent 0%, transparent 50%, #a8b7bf calc(50% + 1px), transparent 51%);
    background-size: 70%,100% 50%;
    background-position: center,0 0;
}
.page1 .col-for-tracks .tracks .details .tb-detail{
    display: table-cell;
    padding-bottom: 5px;
    padding-left: 5px;
}
.page1 .col-for-tracks .tracks .footer{
    padding: 4px;
    text-align: right;
    font-size: 12px;
    font-weight: 100;
    color:#a8b7bf;
}
.page1 .col-for-tracks .tracks .footer a.return{
    cursor: pointer;
    float: left;
}

/* 以下是page2 */

.page2{
    background-image: url('../images/bg2.png');
    background-size: cover;
    background-position: 100% 0;
}
.page2::after{
    content: " ";
    display: block;
     position: absolute; 
    top:0;
    left: 0;
    z-index: 0;
}
@media (max-width:992px){
    .page2::after{
        width: 100%;
        height: 100%;
        background-color: rgba(254, 206, 0,0.5);
    }  
}
@media (min-width:992px){
    .page2::after{
        background-color: #fece00;
        width:50%;
        height:100%;
    }
}
.page2 div.desc{
     position: relative; 
    z-index: 10;
    color: white;
    font-size: 16px;
    font-weight: bold;
}
.page2 div.desc h1{
    font-size: 48px;
    margin-bottom: 44px;
    font-weight: bold;
    padding-left: 10px;
}
@media (max-width:1355px) and (min-width:1200px){
    .page2 div.desc h1{
        font-size:39px;
    }
}
@media (max-width:350px){
    .page2 div.desc h1{
        font-size: 11.5vw;
        /* margin-bottom: 0; */
    }
}
@media (max-width:230px){
    .page2 div.desc h1{
        font-size: 10.5vw;
    }
}

.page2 div.desc h1 em{
     /* text-decoration: underline;  */
    border-bottom: 6px white solid;
    padding-bottom: 10px;
    font-style: normal;
}
@media (max-width:1355px) and (min-width:1200px){
    .page2 div.desc h1 em{
        border-width: 4px;
    }
}
@media (max-width:230px){
    .page2 div.desc h1 em{
        border-width: 2px;
    }
}
@media (max-width:190px){
    .page2 div.desc h1 em{
        border-width: 0;
    }
}
.page2 div.desc>.row>div>.row{
    padding: 0px 30px 0px 0;
}
.page2 div.desc>.row>div>.row:nth-child(2){
    background-color: #F1C300;
    padding: 45px 30px 50px 0;
    line-height: 30px;
    /* word-spacing: -1px; */
    letter-spacing: 0px;
    padding-left: 0px;
}
@media  (min-width:1200px){
    .page2 div.desc>.row>div>.row>div{
        padding-left: 0;
        padding-right: 8px;
    }
}
.page2 div.desc p.service{
    padding-left: 10px;
}
/*下面是page3*/

.page3{
    background-image: url("../images/bg1.jpg");
    background-size: cover;
    color:#585A57;
    font-weight: bolder;
    font-size: 16px;
}
.page3::after{
    /*铺上一层白色半透明*/
    content: " ";
    display: block;
     position: absolute; 
    background-color: rgba(255,255,255,0.5);
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 0;
}   
.page3 div.desc{
     position: relative; 
    z-index: 10;
}
.page3 div.desc h1{
    text-align: center;
    color:#fece00;
    font-size: 48px;
    margin-bottom: 59px;
    font-weight: bold;
}
@media (max-width:768px){
    .page3 div.desc h1{
        margin-bottom: 9px;
        font-size:7.5vw;
    }
    .page3 div.desc p.concept{
        font-size: 15px;
        font-size: 4vw;
    }
}
.page3 div.desc{
    /* width: 630px; */
    max-width: 100%;
}
@media (max-width:768px){
    .page3 div.desc{
        margin-top: 10px;
    }
}
.page3 p.concept{
    padding: 0 35px;
    text-align: left;
}
.page3 div.desc .row.pics{
    margin-left: 0px; 
    margin-right: 0;
     /* display: flex;  */
    justify-content: space-between; 
    padding-top:60px;
}
.page3 div.desc .row>div{
    text-align: center;
    /* padding-bottom: 20px; */
}
.page3 div.desc .row.pics>div{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: space-between;
    margin-left: -50px;
    margin-bottom: 5px;
}
.page3 div.desc .row.pics img{
    /* width: 100px; */
    /* height: 100px; */
    margin-left: 50px;
    margin-bottom: 5px;
}

footer{
    position: fixed;
    /* height: 50px; */
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.25);
    z-index: 9;
    text-align: center;
    color: #8c8c8c;
    padding: 20px 0 0 0;
    bottom: 0;
    padding-top: 0;
}
footer br{
    display: none;
}
@media (max-width:530px){
    footer br{
        display: inline;
    }
    footer b{
        display: none;
    }
}
